<template>

  <div class="my-car">
    <div class="icon-footer">
      <img src="../../assets/image/detail-phone.png" alt="">
      <img src="../../assets/image/detail-car.png" alt="">
      <img src="../../assets/image/detail-star.png" alt="">
    </div>
    <div class="detail-buy" @click="onshow">立即购买</div>
    <div class="detail-join" @click="onshow">加入购物车
    </div>
    <!-- 详情页加入购物车底部弹框 -->
      <van-sku
        v-model="show"
        :sku="sku"
        :goods="goods"
        :goods-id="goodsId"
        :quota="quota"
        :quota-used="quotaUsed"
      />
  </div>

</template>

<script>
import detail from '../../assets/style/detail.css'
import { getdetaillist } from "../../utils/api";
export default {
  data(){
    return{
      show:false,
      goods:{
         picture:''
      },
      goodsId:0,
      quota: 0,
      quotaUsed: 0,
      sku: {},
    }
  },
  mounted(){
   this.getdetaillist
   this.showall
  },
  computed:{
   detaillist() {
      return this.$store.state.detail.detaillist;
    },
    showall(){
      this.sku={
      // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
      // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
      tree: [
        {
          k: '颜色', // skuKeyName：规格类目名称
          k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
          v: [
            {
              id: '1', // skuValueId：规格值 id
              name: '彩色', // skuValueName：规格值名称
            }
          ]
        },
         {
          k: '尺寸', // skuKeyName：规格类目名称
          k_s: 's2', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
          v: [
            {
              id: '1', // skuValueId：规格值 id
              name: '大', // skuValueName：规格值名称
            },
            {
               id: '2', // skuValueId：规格值 id
              name: '小', // skuValueName：规格值名称
            }
          ]
        },
        
      ],
      // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
      list: [
        {
          id: this.detaillist.productId, // skuId
          s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
          s2: '1', // 规格类目 k_s 为 s2 的对应规格值 id
          price:this.detaillist.currentPrice*100, // 价格（单位分）
          stock_num: 110 // 当前 sku 组合对应的库存
        }
      ],
       price: this.detaillist.currentPrice, 
       collection_id:this.detaillist.productId,
       none_sku: false,
       hide_stock: false // 是否隐藏剩余库存
      }
      this.goods={
        picture:this.detaillist.imgUrl
      }
    }
    
  },
  methods:{
    onshow(){
     this.showall
      this.show=!this.show
    },
    async getdetaillist() {
      await this.$store.dispatch("detail/getdetaillist", {
        productId: this.$route.params.id,
      })
    } 
  }
}
</script>

<style lang="stylus"> 
  .my-car{
    position fixed
    left  0
    bottom 0
    display flex
    .icon-footer{
      width 130px
      height 45px
      background  #eeeeee
      display flex
      align-items center
      justify-content space-evenly
      img{
        width 20px
        height 20px
      }
    }
  .detail-buy{
    width 124px
    height 45px
    background #23272B
    font-size 14px
    color #ffffff
    line-height 45px
    text-align center
   }
   .detail-join{
     width 121px
     height 45px
     background #BB2741
     font-size 14px
     color #ffffff
     line-height 45px
     text-align center
   }
   .van-popup--round {
    border-radius 0
    
   }
   
  }
</style>